<template>
  <div
    un-flex="~ [1_0_0] col"
    un-overflow-hidden
    un-w="full"
    un-h="full"
    un-p="l-1.5 r-1.5 t-4"
    un-box-border
  >
    <div un-m="x-1.5">
      <el-form
        ref="formRef"
        size="default"
        :model="search"
        :rules="form_rules"
        label-width="auto"
        un-grid="~ rows-auto cols-[repeat(auto-fit,350px)]"
        un-gap="x-2 y-3"
        un-justify-items-end
        un-items-center
      >
<%
    for (column in columnList) {
        <el-form-item
          label="${column.comment}"
          un-flex="~ nowrap"
          un-p="l-1"
          un-box-border
        >
    }
%>
          <el-button
            plain
            type="primary"
            @click="searchClk"
          >
            <template #icon>
              <ElIconSearch />
            </template>
            <span>查询</span>
          </el-button>

          <el-button
            plain
            @click="searchReset"
          >
            <template #icon>
              <ElIconDelete />
            </template>
            <span>重置</span>
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <div
      un-flex
      un-m="x-1.5 t-1.5"
    >
      <div
        un-flex="[1_0_0]"
        un-overflow-hidden
      >
        <TableShowColumns
          :table-columns="tableColumns"
          @reset-columns="resetColumns"
          @store-columns="storeColumns"
        >
          列操作
        </TableShowColumns>
      </div>
    </div>

    <div
      un-flex="~ [1_0_0] col"
      un-overflow-hidden
      un-m="t-1.5"
    >
      <div
        un-flex="~ [1_0_0] col"
        un-overflow-hidden
      >
        <el-table
          ref="tableRef"
          v-header-order-drag="() => ({ tableColumns, storeColumns, offset: 1 })"
          :data="tableData"
          :row-class-name="rowClassName"
          border
          size="small"
          height="100%"
          row-key="id"
          :empty-text="inited ? undefined : `加载中...`"
          @click.ctrl="rowClkCtrl"
          @click.shift="rowClkShift"
          @header-dragend="headerDragend"
          @select="selectChg"
          @select-all="selectChg"
          @row-click="rowClk"
        >
          <el-table-column
            prop="id"
            type="selection"
            align="center"
            width="50"
          />

          <template
            v-for="col in tableColumns"
            :key="col.prop"
          >
            <el-table-column
              v-if="col.hide !== true"
              v-bind="col"
            >
              <template v-if="col.children && col.children.length">
                <el-table-column
                  v-for="childCol in col.children"
                  :key="childCol.prop"
                  v-bind="childCol"
                />
              </template>
            </el-table-column>
          </template>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import type { FormRules } from 'element-plus'

let inited = $ref(false)

let formRef = $ref<InstanceType<typeof ElForm>>()

let tableRef = $ref<InstanceType<typeof ElTable>>()

/** 表格数据 */
let tableData = $ref<any[]>([])

let tableColumns = $ref<ColumnType[]>([])

function initSearch() {
  const search = {}
  return search
}

let search = $ref<any>(initSearch())

let form_rules = $ref<FormRules>({})

/** 表格列 */
let { headerDragend, resetColumns, storeColumns } = $(
  useTableColumns<any>($$(tableColumns), {
    persistKey: new URL(import.meta.url).pathname
  })
)

/** 表格选择功能 */
let { selectChg, rowClassName, rowClk, rowClkCtrl, rowClkShift } = $(useSelect<any>($$(tableRef)))

/** 点击搜索 */
async function searchClk() {
  await dataGrid()
}

/** 重置搜索 */
async function searchReset() {
  await searchClk()
}

/**刷新页面 */
async function dataGrid() {
  if (!formRef) return

  try {
    await formRef.validate()
  } catch {
    return
  }

  // tableData = await fetchData();
}

async function initFrame() {
  await dataGrid()
}

initFrame()
</script>
